<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>菜谱</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		ul li{
			list-style: none;
		}
		
		.sever {
			background-color: #f6f7f8;
			padding-top: 20px;
/* 			position: relative;
			z-index: -2; */
		}
		
		a {
			text-decoration: none;
			color: #000;
		}
		
		.center {
			width: 840px;
			margin: 0 auto;
			position: relative;
			z-index: 0;
		}
		
		hr {
			border: rgba(128, 128, 128, 0) 1px solid;
			background-color: rgba(128, 128, 128, .1);
			margin: 0 20px;
/* 			position: relative;
			z-index: 1; */
		}
		
		.title {
			background-color: rgba(0,0,0,.4);
			position: relative;
			z-index: 1;
		}
		
		.title_top_left a {
			display: block;
			color: #fff;
		}
		
		.title_top {
			display: flex;
			justify-content: space-between;
			height: 60px;
			width: 1100px;
			margin: 0 auto;
/* 			position: relative;
			z-index: 1; */
		}
		
		.title_top .title_top_left {
			display: flex;
			align-items: center;
		}
		
		.title_top .title_top-right .reg {
			display: block;
			background-color: rgba(256,256,256,.1);
			border: 0;
			border-radius: 8px;
			height: 30px;
			width: 80px;
			font-size: 13px;
		}
		.title_top .title_top-right .reg>a{
			color: #fff;
		}
		
		.title_top .title_top-right {
			display: flex;
			align-items: center;
		}
		
		.title_top_left .title_a {
			margin-left: 30px;
		}
		
		.title_top-right input {
			width: 150px;
			height: 30px;
			border: 0;
			background-color: rgba(256,256,256,0);
			border-radius: 10px;
			outline: none;
			padding-left: 5px;
			color: #fff;
		}
		
		#Select_Search a {
			display: inline-block;
			position: absolute;
			right: 5%;
			top: 50%;
			transform: translateY(-50%);
		}
		
		.title_top-right a img {
			width: 15px;
			line-height: 30px;
		}
		
		#Select_Search {
			border: 1px solid rgba(0, 0, 0, 0	);
			background-color: #f4f4f4;
			margin-right: 100px;
			border-radius: 10px;
			position: relative;
			background-color: rgba(256,256,256,.1);
		}
		
		#head_select {
			font-size: 12px;
			height: 30px;
			color: #fff;
			border: 0;
			border-radius: 10px;
			outline: none;
			padding: 0 8px;
			background-color: rgba(256,256,256,0);
		}
		
		.title_low {
			display: flex;
			justify-content: space-between;
			height: 60px;
			width: 1100px;
			margin: 0 auto;
/* 			position: relative;
			z-index: 1; */
		}
		
		.title_low .title_low_left {
			display: flex;
			align-items: center;
		}
		
		.title_low .title_low_left a {
			display: block;
			font-size: 14px;
			color: #fff;
		}
		
		.title_low .title_low_left a:not(:first-child) {
			margin-left: 24px;
		}
		
		.title_low .title_low_right img {
			display: block;
			width: 16px;
			height: 16px;
		}
		
		.title_low .title_low_right div {
			display: flex;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .2);
			padding: 6px 8px;
			border: 1px solid #e2e8f0;
			border-radius: 5px;
			height: 25px;
			margin-top: 10px;
			align-items: center;
		}
		
		.title_low .title_low_right span {
			display: block;
			font-size: 13px;
			color: #fff;
			margin-left: 5px;
		}
		
		.tail {
			width: 1100px;
			margin: 0 auto;
			padding: 30px 0;
			display: flex;
			justify-content: space-between;
		}
		
		.tail p {
			font-size: 13px;
			margin: 10px;
		}
		
		.tail img {
			display: block;
			width: 100px;
			padding-right: 50px;
		}
		
		.xu_pic{
			position: absolute;
			top: 0;
			width: 100vw;
			height: 500px;
			overflow: hidden;
			/* z-index: -1; */
		}
		.xu_pic>img{
			display: block;
			width: 100%;
			position: absolute;
			bottom: -100px;
			filter: blur(10px);
		}
		
		.sever>.center>:first-child{
			background-color: #fff;
		}
		.sever>.center>div{
			border-radius: 10px;
		}
		.sever>.center>:first-child>:first-child{
			height: 300px;
			overflow: hidden;
			position: relative;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
		}
		.sever>.center>div>div>img{
			width: 100%;
			position: absolute;
			bottom: -50px;
		}
		.sever>.center>div>div>h1{
			position: absolute;
			bottom: 0;
			height: 146px;
			width: 840px;
			padding: 73px 25px 25px;
			color: #fff;
			box-sizing: border-box;
			background: linear-gradient( 0deg ,rgba(9,15,29,.65), transparent);
		}
		.info_center{
			width: 750px;
			background-color: #fff;
			margin: 0 auto;
			padding-bottom: 30px;
		}
		.info_center>hr{
			margin: 0;
		}
		.info_center>h2{
			margin: 30px 0;
		}
		.info_center>h2~div{
			margin-bottom: 25px;
		}
		.info_center>.card_title{
			display: flex;
		}
		.info_center>.card_title>.title_name{
			margin: 20px 0;
			font-size: 12px;
			height: 30px;
			padding: 0 16px;
			background-color: rgba(70, 156, 81, 0.1);
			line-height: 30px;
			color: #469c51;
			border-radius: 10px;
		}
		.info_center>.card_title>.title_date{
			margin: 20px 0;
			color: #8590a6;
			font-size: 12px;
			line-height: 30px;
			margin-left: 30px;
		}
		
		.post{
			background-color: #f6f7f8;
			margin-top: 20px;
			display: flex;
			justify-content: space-between;
		}
		.post>.post_prev, .post_next{
			height: 128px;
			/* width: 410px; */
			background-color: #fff;
			
		}
		.post>.post_prev{
			display: flex;
			align-items: center;
			border-radius: 10px;
			overflow: hidden;
		}

		.post>.post_prev>.prev{
			width: 50px;
			text-align: center;
		}
		.post>.post_prev>.tips{
			width: 150px;
			text-align: left;
			padding: 16px 0;
			height: 128px;
			box-sizing: border-box;
		}
		.post>.post_prev>.tips>.post_prev_type{
			font-size: 12px;
			color: #aaaeb3;
		}
		.post>.post_prev>.tips>.post_prev_name{
			font-size: 15px;
			height: 43px;
			margin: 10px 0;
		}
		.post>.post_prev>.tips>.post_prev_date{
			font-size: 12px;
			color: #aaaeb3;
		}
		.post>.post_prev>.post_prev_img>{
			width: 210px;
			height: 128px;
			overflow: hidden;
		}
		.post_prev_img>img{
			width: 210px;
			height: 128px;
			display: block;
		}
		
		.post>.post_next{
			display: flex;
			align-items: center;
			border-radius: 10px;
			overflow: hidden;
		}
		.post>.post_next>.next{
			width: 50px;
			text-align: center;
		}
		.post>.post_next>.tips{
			width: 150px;
			text-align: right;
			padding: 16px 0;
			height: 128px;
			box-sizing: border-box;
		}
		.post>.post_next>.tips>.post_next_type{
			font-size: 12px;
			color: #aaaeb3;
		}
		.post>.post_next>.tips>.post_next_name{
			font-size: 15px;
			height: 43px;
			margin: 10px 0;
		}
		.post>.post_next>.tips>.post_next_date{
			font-size: 12px;
			color: #aaaeb3;
		}
		.post>.post_next>.post_next_img>{
			width: 210px;
			height: 128px;
			overflow: hidden;
		}
		.post_next_img>img{
			width: 210px;
			height: 128px;
			display: block;
		}
		
		.null{
			height: 30px;
			background-color: #f6f7f8;
		}

	</style>
</head>
<body>
	<div id="title" class="title">
		<div id="title_top" class="title_top">
			<div id="title_top_left" class="title_top_left">
				<a href="#">
					<h2>小俊食谱中心</h2>
				</a>
				<a href="#" class="title_a">食谱专题</a>
				<a href="#" class="title_a">口味分类</a>
				<a href="#" class="title_a">加入美食群</a>
			</div>
			<div id="title_top_right" class="title_top-right">
				<div id="Select_Search">
					<select id="head_select">
						<option value="wenZhang">文章</option>
						<option value="yongHu">用户</option>
						<option value="wenDang">文档</option>
					</select>
					<input type="search" placeholder="搜索" class="search">
					<a href="#"><img src="./img/spirit/search.png" alt=""></a>
				</div>
				<button class="reg"><a href="MS_product/public/login.html">登录/注册</a></button>
			</div>
		</div>
		<hr>
		<div id="title_low" class="title_low">
			<div id="title_low_left" class="title_low_left">
				<a href="index.html" id="head_list_1">全部</a>
				<a href="#" id="head_list_2">早餐</a>
				<a href="#" id="head_list_3">烘焙甜品</a>
				<a href="#" id="head_list_4">鸡鸭禽类</a>
				<a href="#" id="head_list_5">猪牛羊肉</a>
				<a href="#" id="head_list_6">海鲜水产</a>
				<a href="#" id="head_list_7">蔬食</a>
				<a href="#" id="head_list_8">小炒</a>
				<a href="#" id="head_list_9">主食</a>
				<a href="#" id="head_list_10">例汤</a>
				<a href="#" id="head_list_11">中式面点</a>
				<a href="#" id="head_list_12">西餐</a>
				<a href="#" id="head_list_13">果汁饮品</a>
				<a href="#" id="head_list_14">卤味酱料</a>
			</div>
			<div id="title_low_right" class="title_low_right">
				<a href="add.html">
					<div>
						<img src="./img/spirit/Pens.png">
						<span>写菜谱</span>
					</div>
				</a>
			</div>
		</div>
		
	</div>
	
	<div class="xu_pic">
		<img src="./img/breakfast/b4.jpg" alt="">
	</div>
	
	<div class="sever">
		<div class="center">
			<div>
				<div>
					<img src="./img/breakfast/b4.jpg" alt="">
					<h1 class="xu_name">蜂蜜枣糕</h1>
				</div>
				<div class="info_center">
					<div class="card_title">
						<div class="title_name">中式面点</div>
						<div class="title_date">22年8月18日</div>
					</div>
					<hr>
					<h2>食材</h2>
					<div>蒸羊羔蒸熊掌蒸鹿尾</div>
					<div>烧花鸭烧雏鸡烧仔鹅</div>
					<div>卤煮卤鸭酱鸡腊肉松花小肚晾肉香肠</div>
					<div>什锦酥盘熏鸡白肚清蒸八宝猪</div>
					<div>江米酿鸭子罐野鸡管鹌鹑卤十件卤子鹅</div>
					<div>山鸡兔脯菜蟒银鱼清蒸哈什蚂</div>
					<div>烩鸭丝烩鸭腰烩鸭条清拌腰丝黄心管</div>
					<div>焖白鳝焖黄鳝豆豉鲇鱼锅烧鲤鱼锅烧鲇鱼</div>
					<div>清蒸甲鱼抓炒鲤鱼抓炒对虾</div>
					<div>软炸里脊软炸鸡</div>
					<div>什锦套肠麻辣油卷卤煮寒鸦</div>
					<div>熘鲜蘑溜鱼腹溜鱼肚溜鱼片醋熘肉片</div>
					<div>烩三鲜烩白膜烩鸽子蛋</div>
					<div>芙蓉燕菜炒虾仁</div>
					<h2>做法</h2>
					<div>君不见黄河之水天上来，奔流到海不复回，君不见高堂明镜悲白发，朝如青丝暮成雪</div>
					<div>人生得意须尽欢，莫使金樽空对月，天生我材必有用，千金散尽还复来</div>
					<div>烹羊宰牛且为乐，会须一饮三百杯，岑夫子，丹丘生，将进酒，杯莫停，与君歌一曲，请君为我倾耳听</div>
					<div>钟鼓馔如不足贵，但愿长醉不愿醒，古来圣贤皆寂寞，惟有饮者留其名</div>
					<div>陈王昔时宴平乐，斗酒十千姿欢谑，主人何为言少钱，径须沽取对君酌</div>
					<div>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁</div>
				</div>
			</div>
			<div class="post">
				<div class="post_prev">
					<div class="prev"><</div>
					<div class="tips">
						<div class="post_prev_type">卤味酱料</div>
						<div class="post_prev_name">熬猪油</div>
						<div class="post_prev_date">2020-8-24 17:24:51</div>
					</div>
					<div class="post_prev_img"><img src="./img/breakfast/b3.jpg" alt=""></div>					
				</div>
				<div class="post_next">
					<div class="post_prev_img"><img src="./img/breakfast/b5.jpg" alt=""></div>
					<div class="tips">
						<div class="post_next_type">卤味酱料</div>
						<div class="post_next_name">熬猪油</div>
						<div class="post_next_date">2020-8-24 17:24:51</div>
					</div>
					<div class="next">></div>
				</div>
			</div>
		</div>
	</div>
	<div class="null"></div>
	<div class="tail">
		<div class="last">
			<p>微信号:a15803260331</p>
			<p>个人内部学习使用项目，如有参考需求，可添加微信</p>
			<p>备案号 © 预留位置</p>
		</div>
		<img src="img/WeChat/WeChat.jpg">
	</div>
</body>
</html>